<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../package/vue/dist/vue.js"></script>
    <title>动态指令参数
    </title>
    <!-- 
        指令的参数可以是动态的，例如v-mydirective:[argument]="value"中，
        argument参数可以根据组件实例数据进行更新！,这使得自定义指令可以在应用
        中被灵活使用。
        例如你想要创建一个自定义指令，用来通过固定布局将元素固定在
        页面上。我们可以像这样创建一个通过指令值来更新竖直位置像素的自定义
        指令：
     -->
</head>
<body>
    <div id="app">
        <p>Scroll down the page</p>
        <p v-pin:[direction]="500">2222222 </p>
    </div>
    <script>
        Vue.directive('pin',{
            bind:function(el,binding,vnode){
                el.style.position='fixed'
                let s =(binding.arg == 'left' ? 'left' : 'top')
              
                el.style[s]=binding.value + 'px'
                console.log(binding.arg)
                
            }
        })
     const app=   new Vue({
            el:'#app',
            data:function(){
                return {
                    direction:"top"
                }
            }
        })
        console.log(app)
    </script>
</body>
</html>